<template>
<div class="schedule-card">
<i class="icon" @click.stop="removeCard">x</i>
    <p>{{ weekDay }} {{ beginTime }}</p> 
    <p>『 {{ course }}』</p>
    <p>{{ teacher }}</p>
</div>
</template>
<script setup>
import  {
    weekdayToChinese,
    timestampToTime
} from './apis/utils.js'
import MyMessageBox from '../MyMessageBox'
import {computed,toRefs,h} from 'vue'
const props = defineProps({
    data: Object
})
const emit = defineEmits(['removeCard'])
const weekDay = computed(() => weekdayToChinese(props.data.weekday))
const beginTime = computed(() => timestampToTime(props.data.begin_time))
const removeCard = () => {
    // 打开messageBox

    MyMessageBox({
        title: '删除课程安排提示',
        btnCancelText: '取消',
        btnConfirmText: '删除',
        type: 'warning',
        insert:h('p','确定要删除该课程安排吗？'),
        confirm(){
            console.log('确定')
            emit('removeCard',props.data)
            
        },
        cancel:()=>{
            // console.log('取消')
        }
    })
}



const {course,teacher} = toRefs(props.data)
</script>
<style lang="scss" scoped>
.schedule-card{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100% ;
    color: #155724;
    background-color: #d4edda;
    .icon{
        position: absolute;
        right: 10px;
        top: 0px;
        font-size: 22px;
        font-style: normal;
    }
    p{
     margin:5px 0;
    }
}
</style>